<style scoped>
  .income-top{
    width: 100%;
  }
  .income-top ul{
    /*width: 100%;*/
    padding: 0 16px;
    display: flex;
  }
  .income-top ul li{
    padding: 10px 0;
    flex: 3;
    text-align: left;
  }
  .income-top ul li:last-child{
    flex: 4;
  }
  .income-top ul li h4{
    color: #555555;
  }
  .income-bottom{
    overflow: scroll;
    margin-bottom: 60px;
  }
  .income-bottom>ul{
    display: flex;
    flex-direction: column;
  }
  .income-bottom>ul>li{
    padding: 4px 16px;
    border-bottom: 1px solid #EDF1F5;
  }
  .list{
    display: flex;
    flex-direction: row;
  }
  .list>li{
    flex:3;
  }
  .list>li:not(:first-child){
    display: flex;
    align-items: flex-end;
  }
  .list>li:last-child{
    flex: 4;
    display: flex;
    justify-content: space-between;
  }
  .list>li>h4{
    font-weight: 300;
    margin-bottom: 3px;
  }
  .list>li>div{
    display: flex;
    flex-direction: column;
  }
  .list>li>div>small{
    opacity: 0.5;
    margin-top: -4px;
  }
  .list>li>div>div{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
  }
  .list>li>div>div>h3{
    font-size: 1.6rem;
  }
  .list>li>div>div>h5{
    margin-bottom: 3px;
  }
  .red-color{
    color: #F74949;
  }
</style>
<template>
  <div class="fix-income">
    <div class="income-top">
      <ul>
        <li><h4>期望回报</h4></li>
        <li><h4>保证利率</h4></li>
        <li><h4>投资期限</h4></li>
        <li><h4>起投门槛</h4></li>
      </ul>
    </div>
    <!-- <v-pulldown :rotate="scrollTop" :pulldownStatus="pulldownStatus.pulldownStatus"></v-pulldown> -->
    <div class="income-bottom" ref='content'>
      <ul>
        <li>
          <router-link to="">
            <ul class="list">
              <li>
                <h4>美国纳斯达克</h4>
                <div>
                  <div>
                    <h3 class="red-color">31.32</h3>
                    <h5 class="red-color">%</h5>
                  </div>
                  <small>期望回报</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>%</h5>
                  </div>
                  <small>保证利率</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>个月</h5>
                  </div>
                  <small>投资期限</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>15</h3>
                    <h5>万</h5>
                  </div>
                  <small>起投门槛</small>
                </div>
                <p style="width:3.8rem;height:3.8rem;">
                  <x-circle :percent="percent2" :stroke-width="6" :trail-width="6" :stroke-color="strokeColor2" trail-color="#ececec">
                    <h4>投资</h4>
                  </x-circle>
                </p>
              </li>

            </ul>
          </router-link>

        </li>
        <li>
          <router-link to="">
            <ul class="list">
              <li>
                <h4>美国纳斯达克</h4>
                <div>
                  <div>
                    <h3 class="red-color">31.32</h3>
                    <h5 class="red-color">%</h5>
                  </div>
                  <small>期望回报</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>%</h5>
                  </div>
                  <small>保证利率</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>个月</h5>
                  </div>
                  <small>投资期限</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>15</h3>
                    <h5>万</h5>
                  </div>
                  <small>起投门槛</small>
                </div>
                <p style="width:3.8rem;height:3.8rem;">
                  <x-circle :percent="percent2" :stroke-width="6" :trail-width="6" :stroke-color="strokeColor2" trail-color="#ececec">
                    <h4>投资</h4>
                  </x-circle>
                </p>
              </li>

            </ul>
          </router-link>

        </li>
        <li>
          <router-link to="">
            <ul class="list">
              <li>
                <h4>美国纳斯达克</h4>
                <div>
                  <div>
                    <h3 class="red-color">31.32</h3>
                    <h5 class="red-color">%</h5>
                  </div>
                  <small>期望回报</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>%</h5>
                  </div>
                  <small>保证利率</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>个月</h5>
                  </div>
                  <small>投资期限</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>15</h3>
                    <h5>万</h5>
                  </div>
                  <small>起投门槛</small>
                </div>
                <p style="width:3.8rem;height:3.8rem;">
                  <x-circle :percent="percent2" :stroke-width="6" :trail-width="6" :stroke-color="strokeColor2" trail-color="#ececec">
                    <h4>投资</h4>
                  </x-circle>
                </p>
              </li>

            </ul>
          </router-link>

        </li>
        <li>
          <router-link to="">
            <ul class="list">
              <li>
                <h4>美国纳斯达克</h4>
                <div>
                  <div>
                    <h3 class="red-color">31.32</h3>
                    <h5 class="red-color">%</h5>
                  </div>
                  <small>期望回报</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>%</h5>
                  </div>
                  <small>保证利率</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>个月</h5>
                  </div>
                  <small>投资期限</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>15</h3>
                    <h5>万</h5>
                  </div>
                  <small>起投门槛</small>
                </div>
                <p style="width:3.8rem;height:3.8rem;">
                  <x-circle :percent="percent2" :stroke-width="6" :trail-width="6" :stroke-color="strokeColor2" trail-color="#ececec">
                    <h4>投资</h4>
                  </x-circle>
                </p>
              </li>

            </ul>
          </router-link>

        </li>
        <li>
          <router-link to="">
            <ul class="list">
              <li>
                <h4>美国纳斯达克</h4>
                <div>
                  <div>
                    <h3 class="red-color">31.32</h3>
                    <h5 class="red-color">%</h5>
                  </div>
                  <small>期望回报</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>%</h5>
                  </div>
                  <small>保证利率</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>个月</h5>
                  </div>
                  <small>投资期限</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>15</h3>
                    <h5>万</h5>
                  </div>
                  <small>起投门槛</small>
                </div>
                <p style="width:3.8rem;height:3.8rem;">
                  <x-circle :percent="percent2" :stroke-width="6" :trail-width="6" :stroke-color="strokeColor2" trail-color="#ececec">
                    <h4>投资</h4>
                  </x-circle>
                </p>
              </li>

            </ul>
          </router-link>

        </li>
        <li>
          <router-link to="">
            <ul class="list">
              <li>
                <h4>美国纳斯达克</h4>
                <div>
                  <div>
                    <h3 class="red-color">31.32</h3>
                    <h5 class="red-color">%</h5>
                  </div>
                  <small>期望回报</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>%</h5>
                  </div>
                  <small>保证利率</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>个月</h5>
                  </div>
                  <small>投资期限</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>15</h3>
                    <h5>万</h5>
                  </div>
                  <small>起投门槛</small>
                </div>
                <p style="width:3.8rem;height:3.8rem;">
                  <x-circle :percent="percent2" :stroke-width="6" :trail-width="6" :stroke-color="strokeColor2" trail-color="#ececec">
                    <h4>投资</h4>
                  </x-circle>
                </p>
              </li>

            </ul>
          </router-link>

        </li>
        <li>
          <router-link to="">
            <ul class="list">
              <li>
                <h4>美国纳斯达克</h4>
                <div>
                  <div>
                    <h3 class="red-color">31.32</h3>
                    <h5 class="red-color">%</h5>
                  </div>
                  <small>期望回报</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>%</h5>
                  </div>
                  <small>保证利率</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>个月</h5>
                  </div>
                  <small>投资期限</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>15</h3>
                    <h5>万</h5>
                  </div>
                  <small>起投门槛</small>
                </div>
                <p style="width:3.8rem;height:3.8rem;">
                  <x-circle :percent="percent2" :stroke-width="6" :trail-width="6" :stroke-color="strokeColor2" trail-color="#ececec">
                    <h4>投资</h4>
                  </x-circle>
                </p>
              </li>

            </ul>
          </router-link>

        </li>
        <li>
          <router-link to="">
            <ul class="list">
              <li>
                <h4>美国纳斯达克</h4>
                <div>
                  <div>
                    <h3 class="red-color">31.32</h3>
                    <h5 class="red-color">%</h5>
                  </div>
                  <small>期望回报</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>%</h5>
                  </div>
                  <small>保证利率</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>个月</h5>
                  </div>
                  <small>投资期限</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>15</h3>
                    <h5>万</h5>
                  </div>
                  <small>起投门槛</small>
                </div>
                <p style="width:3.8rem;height:3.8rem;">
                  <x-circle :percent="percent2" :stroke-width="6" :trail-width="6" :stroke-color="strokeColor2" trail-color="#ececec">
                    <h4>投资</h4>
                  </x-circle>
                </p>
              </li>
            </ul>
          </router-link>
        </li>
        <li>
          <router-link to="">
            <ul class="list">
              <li>
                <h4>美国纳斯达克</h4>
                <div>
                  <div>
                    <h3 class="red-color">31.32</h3>
                    <h5 class="red-color">%</h5>
                  </div>
                  <small>期望回报</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>%</h5>
                  </div>
                  <small>保证利率</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>个月</h5>
                  </div>
                  <small>投资期限</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>15</h3>
                    <h5>万</h5>
                  </div>
                  <small>起投门槛</small>
                </div>
                <p style="width:3.8rem;height:3.8rem;">
                  <x-circle :percent="percent2" :stroke-width="6" :trail-width="6" :stroke-color="strokeColor2" trail-color="#ececec">
                    <h4>投资</h4>
                  </x-circle>
                </p>
              </li>

            </ul>
          </router-link>

        </li>
        <li>
          <router-link to="">
            <ul class="list">
              <li>
                <h4>美国纳斯达克</h4>
                <div>
                  <div>
                    <h3 class="red-color">31.32</h3>
                    <h5 class="red-color">%</h5>
                  </div>
                  <small>期望回报</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>%</h5>
                  </div>
                  <small>保证利率</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>个月</h5>
                  </div>
                  <small>投资期限</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>15</h3>
                    <h5>万</h5>
                  </div>
                  <small>起投门槛</small>
                </div>
                <p style="width:3.8rem;height:3.8rem;">
                  <x-circle :percent="percent2" :stroke-width="6" :trail-width="6" :stroke-color="strokeColor2" trail-color="#ececec">
                    <h4>投资</h4>
                  </x-circle>
                </p>
              </li>

            </ul>
          </router-link>

        </li>
        <li>
          <router-link to="">
            <ul class="list">
              <li>
                <h4>美国纳斯达克</h4>
                <div>
                  <div>
                    <h3 class="red-color">31.32</h3>
                    <h5 class="red-color">%</h5>
                  </div>
                  <small>期望回报</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>%</h5>
                  </div>
                  <small>保证利率</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>3</h3>
                    <h5>个月</h5>
                  </div>
                  <small>投资期限</small>
                </div>
              </li>
              <li>
                <div>
                  <div>
                    <h3>15</h3>
                    <h5>万</h5>
                  </div>
                  <small>起投门槛</small>
                </div>
                <p style="width:3.8rem;height:3.8rem;">
                  <x-circle :percent="percent2" :stroke-width="6" :trail-width="6" :stroke-color="strokeColor2" trail-color="#ececec">
                    <h4>投资</h4>
                  </x-circle>
                </p>
              </li>

            </ul>
          </router-link>

        </li>
      </ul>



    </div>
  </div>
</template>
<script>
import { XCircle, Range, Icon } from 'vux'
export default {
  name: "",
  data: () => ({
    percent1: 10,
    percent2: 30,
    strokeColor2: '#FF7C00'
    // scrollTop: 0,
  }),
  components: {
    XCircle,
    Range,
    Icon
  },
  mounted() {
    //do something after mounting vue instance
    let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    let h1 = h - 160
    this.$refs.content.style.height = h1 + 'px'
  },
  activated() {
    this.$store.state.strategyActive = 2
  }
}
</script>
